<template>
	<view class="task-card">
		<view class="card-main-box">
			<view class="content">
				<text class="title">{{ cardData.title }}</text>
				<text class="sub-title" v-for="subTitle in cardData.subTitle" :key="subTitle">
					{{ subTitle }}
				</text>
			</view>
			<u-image v-if="statusImage" class="process-status" width="134rpx" height="106rpx" :src="statusImage" />
		</view>
		<slot name="menu" />
	</view>
</template>

<script>
	import statusImg from '@/static/icon/approval-icon.png'
	import passImg from '@/static/icon/pass-icon.png'
	import refuseImg from '@/static/icon/refuse-icon.png'
	import draftImg from '@/static/icon/draft-icon.png'
	import cancelImg from '@/static/icon/cancel-icon.png'
	import stoppedImg from '@/static/icon/stopped-icon.png'
	import closeIcon from '@/static/icon/close-icon.png'

	export default {
		name: 'taskCard',
		props: {
			cardData: {
				type: Object,
				required: true
			},
			flowStatus: {
				type: Number
			}
		},
		data() {
			return {

			}
		},
		computed: {
			statusImage() {
				switch (this.flowStatus) {
					case this.SysFlowWorkOrderStatus.APPROVING:
					case this.SysFlowWorkOrderStatus.SUBMITED:
						// 审批中
						return statusImg;
					case this.SysFlowWorkOrderStatus.STOPPED:
						// 终止
						return stoppedImg;
					case this.SysFlowWorkOrderStatus.REFUSED:
						// 拒绝
						return refuseImg;
					case this.SysFlowWorkOrderStatus.FINISHED:
						// 通过
						return passImg;
					case this.SysFlowWorkOrderStatus.CANCEL:
						// 撤销
						return cancelImg;
					case this.SysFlowWorkOrderStatus.DRAFT:
						// 草稿
						return draftImg;
					default:
						return null;
				}
			}
		}
	}
</script>

<style scoped>
	.task-card {
		background: white;
		border-radius: 8px;
		padding: 16px;
	}

	.card-main-box {
		display: flex;
	}

	.card-main-box .content {
		flex-grow: 1;
		flex-shrink: 1;
		width: 100px;
	}

	.card-main-box .process-status {
		flex-grow: 0;
		flex-shrink: 0;
		margin-left: 15px;
		margin-top: 15px;
	}

	.card-main-box .content .title {
		display: block;
		font-weight: bold;
		color: #333333;
		line-height: 20px;
		height: 20px;
		font-size: 16px;
		margin-bottom: 8px;
	}

	.card-main-box .content .sub-title {
		display: block;
		color: #666666;
		line-height: 20px;
		height: 20px;
		font-size: 14px;
		font-weight: 400;
		margin-top: 4px;
		/** 单行省略号 */
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
</style>